<template>
  <div class="main-page">
    <div class="main-01">
      <div class="main-tab-01-01">
        <div class="main-tab-title">
          <span>课题</span>
        </div>
        <div class="table-class">
          <div class="table-class-title">
            <span>课题等级</span>
            <span>已结题</span>
            <span>开题中</span>
          </div>
          <div class="table-class-box">
            <div class="table-class-box-list" v-for="(item, index) in topic" :key="index">
              <span>{{ item.name }}</span>
              <span>{{ item.end_number }}</span>
              <span>{{ item.begin_number }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="main-tab-01-01">
        <div class="main-tab-title">
          <span>文章</span>
        </div>
        <div id="development_Line" style="width:100%;" class="home_top_Development" v-html="safeRichTextContent"></div>
      </div>
    </div>
    <div class="main-02">
      <div class="main-02-top">
        <div class="main-tab-title">
          <span>课题进度状态</span>
        </div>
        <div class="dropdown-container">
          课题等级：
          <select v-model="selectedTopic" @change="updateList($event)">
            <option value="" disabled selected style="color: white;">请选择</option>
            <option v-for="item in topic" :value="item.type" :key="item.type">{{ item.name }}</option>
          </select>
          课题名称：
          <select v-model="selectedList" @change="updateDetail($event)">
            <option value="" disabled selected style="color: white;">请选择</option>
            <option v-for="item in filteredList" :value="item.id" :key="item.id">{{ item.name }}</option>
          </select>
        </div>
        <div class="class-body">
          <div class="class-body-title">
            课题:{{ detailName }}
          </div>
          <div class="class-body-box-out">
            <div class="class-body-box-out-title">
              <span></span>
              <span>参与人员</span>
              <span>工作概述</span>
            </div>
            <div class="class-body-box">
              <div class="class-body-box-l">
                <div class="class-body-box-l-t" v-for="item in detail.length" :class="item==1?'active':''">
                  <span></span>
                  <i></i>
                  <span></span>
                </div>
              </div>
              <div class="class-body-box-r">
                <div v-for="detail in detail" :key="id" class="class-body-box-r-list">
                  <div class="class-body-box-r-list-name">{{ detail.name }}</div>
                  <span class="class-body-box-r-list-line"></span>
                  <div class="class-body-box-r-list-box1">
                    <span v-for="(user, index) in detail.user_ids" :key="user.id">
                      {{ user.realname }}<span v-if="index !== detail.user_ids.length - 1">,</span>
                    </span>
                  </div>
                  <span class="class-body-box-r-list-line2"></span>
                  <div class="class-body-box-r-list-box2">
                    {{ detail.content}}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
  .class-body-box-r-list-name {
    width: 150px;
    word-break: break-all;
    white-space: normal;
  }
</style>

<script>


import {acadmicAchievement} from "@/api/admin/school";

export default {
  name: "home",
  data() {
    return {
      topic: [],
      safeRichTextContent: '',
      selectedTopic: null,
      list: [],
      filteredList: [],
      selectedList: null,
      detail: {},
      detailName: '',
    }
  },
  created() {
    this.getSchoolFn();
  },
  mounted() {
  },
  methods: {
    updateList(event) {
      const selectedType = event.target.value;
      console.log(selectedType, '选择的类型');
      if (selectedType) {
        this.filteredList = this.list.filter(item => item.type === parseInt(selectedType));
      } else {
        this.filteredList = [];
      }
      console.log(this.list, '选择的列表');
    },
    updateDetail(event) {
      acadmicAchievement({'topic_id': event.target.value}).then(res => {
        if (res.code == 0) {
          this.detail = res.detail
          this.detailName = this.filteredList.filter(item => item.id === parseInt(event.target.value))['0'].name
        }
        console.log(this.detailName, '文章返回的')
      })
    },
    getSchoolFn() {
      acadmicAchievement().then(res => {
        if (res.code == 0) {
          this.topic = res.topic;
          this.safeRichTextContent = res.culture
          this.list = this.filteredList =  res.list
          this.detail = res.detail
          this.detailName = this.filteredList['0'].name
        }
        console.log(res, '文章返回的')
      })
    }
  }
}
</script>

<style scoped>
.main-page {
  display: flex;
  padding: 20px;
}

.main-tab-title {
  background: url(./assets/img/h-008.png) no-repeat;
  background-size: 100% 50px;
  background-position: left bottom;
  height: 50px;
  font-style: italic;
  font-size: 26px;
  padding-left: 40px;
  line-height: 24px;
  font-weight: 500;
  margin-bottom: 20px;
}

.main-tab-title span {
  background: linear-gradient(to bottom, #fff, #fcfcb8);
  -webkit-background-clip: text; /* 将背景裁剪为文字区域 */
  -webkit-text-fill-color: transparent; /* 将文字颜色设置为透明 */
  /*color: #fcfcb8;*/
  /*text-shadow: 2px 2px 1px #000;*/
}

.main-01 {
  width: 40%;
  background: rgba(5, 25, 53, .6);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.main-02 {
  flex: 1;
  background: rgba(5, 25, 53, .6);
  margin: 0 20px;
  border-radius: 10px;
}

.main-tab-box-t-01 span:nth-child(1) {
  font-size: 14px;
  color: #ddd;
  margin-bottom: 5px;
  display: block;
}

.main-tab-box-t-01 span:nth-child(2) {
  font-size: 20px;
}

.home_top_Development {
  height: 100%;
  width: 100%;
  color: #ddd;
  font-size: 20px;
  line-height: 2.8; /* 调整行间距 */
}

.main-tab-01-01 {
  flex: 1; /* 使每个子元素高度相等 */
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
}

table {
  border-collapse: collapse;
  width: 100%;
  border: none;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
  color: #ddd;
}

th {
  background-color: transparent; /* 背景透明 */
  color: #518e69; /* 字体颜色 */
  border: none;
}

.banner-box img {
  width: 100%;
  display: block;
}


.dropdown-container {
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 24px;
}

.dropdown-container select {
  width: 200px;
  height: 50px;
  font-size: 24px;
  background: rgba(5, 25, 53, .6);
  color: #ddd;
  border: 1px solid #ddd;
  padding: 5px;
  border-radius: 5px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"><path fill="%23ddd" d="M7 10l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
}

.dropdown-container select:focus {
  outline: none;
}

.dropdown-container {
  color: #ddd;
}

.table-class-title {
  height: 80px;
  line-height: 80px;
  display: flex;
  align-items: center;
  color: #a4ff82;
  font-size: 22px;
}

.table-class-title span {
  flex: 1;
  text-align: center;
}

.table-class-title span:last-child {
  color: #ffe832;
}

.table-class-box-list {
  border-bottom: 1px solid #2a4e6a;
  color: #fff;
  font-size: 24px;
  display: flex;
  align-items: center;
}

.table-class-box-list span {
  flex: 1;
  text-align: center;
  height: 90px;
  line-height: 90px;
  display: block;
}

.table-class-box-list:nth-child(2n) {
  background: rgba(30, 130, 183, .26);
}

.table-class-box-list:nth-child(2n-1) {
  background: rgba(20, 197, 255, .26);
}

.main-02-top {
  padding: 10px;
}

.class-body {

}

.class-body-box-out {
  border: 1px solid #b5c5d4;
  padding: 20px;
}

.class-body-box {
  display: flex;
}

.class-body-box-l {

}

.class-body-box-l-t {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.class-body-box-l-t span {
  display: block;
  width: 2px;
  height: 70px;
  background: #fff;
}

.class-body-box-l-t:first-child span:first-child, .class-body-box-l-t:last-child span:last-child {
  background: none;
}

.class-body-box-l-t i {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 7px;
  background: #fff;
}

.class-body-box-l-t.active span {
  display: block;
  width: 2px;
  height: 70px;
  background: #67f2f1;
}

.class-body-box-l-t.active i {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 7px;
  background: #67f2f1;
}

.class-body-box-r-list {

}

.class-body-box-r {
  flex: 1;
  color: #fff;
  font-size: 24px;
  margin-left: 30px;
}

.class-body-box-r-list {
  height: 154px;
  display: flex;
  align-items: center;
}

.class-body-box-r-list-line {
  width: 50px;
  display: block;
  border-bottom: 1px solid #fff;
}

.class-body-box-r-list-line2 {
  width: 50px;
  display: block;
  border-bottom: 1px solid #fff;
}

.class-body-box-r-list-box1 {
  border: 1px solid #fff;
  flex: 1;
  padding: 10px;
}

.class-body-box-r-list-box2 {
  border: 1px solid #fff;
  flex: 1;
  padding: 10px;
}

.class-body-title {
  color: #a4ff82;
  padding: 20px 0;
  font-size: 26px;
}
.class-body-box-out-title{
  display: flex;
  align-items: center;
  padding: 10px 0 0;
}
.class-body-box-out-title span{
  flex: 1;
  color: #a4ff82;
  font-size: 28px;
}
</style>
